import createElement from "./createElement.js";
import updateChildren from "./updateChildren.js";

export default function pathchVnode(oldVnode, newVnode) {
  // 判断新旧vnode是否是同一个对象
  if (newVnode == oldVnode) return;
  // 判断新vnode有没有text属性
  if (newVnode.text != undefined && (newVnode.children == undefined || newVnode.children.length == 0)) {
    // console.log('新vnode有text属性');
    if (newVnode.text != oldVnode.text) {
      // 如果新老的虚拟节点中的text不同，那么直接让新的text写入老的elm中即可。如果老的elm中是children，那么也会立即消失掉。
      oldVnode.elm.innerText = newVnode.text;
    }
  } else {
    // console.log('新vnode没有text属性');
    // 判断老的有没有children
    if (oldVnode.children != undefined && oldVnode.children.length > 0) {
      // 老的有children，新的也有children，此时就是最复杂的情况，就是新老都有children
      // 
      updateChildren(oldVnode.elm, oldVnode.children, newVnode.children);
      // 
    } else {
      // 老的没有chilren，新的有children
      // 清空老的节点的内容
      oldVnode.elm.innerHTML = '';
      // 遍历新的vnode的子节点，创建DOM，上树。
      for (let i = 0; i < newVnode.children.length; i++) {
        let dom = createElement(newVnode.children[i]);
        oldVnode.elm.appendChild(dom);
      }
    }
  }
}